/**
 * 用户管理模块配置文件
 */

import { Delete, Edit } from '@element-plus/icons-vue'
import { h } from 'vue'
import { ElTag, ElImage } from 'element-plus'

/**
 * 搜索条件配置
 */
export const searchConfig = [
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    placeholder: '请输入用户名',
    defaultValue: '',
    showInMore: false,
  },
  {
    field: 'nickname',
    label: '昵称',
    component: 'Input',
    placeholder: '请输入昵称',
    defaultValue: '',
    showInMore: false,
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    placeholder: '请选择状态',
    defaultValue: '',
    showInMore: false,
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' },
    ],
  },
  {
    field: 'phone',
    label: '手机号',
    component: 'Input',
    placeholder: '请输入手机号',
    defaultValue: '',
    showInMore: true,
  },
  {
    field: 'email',
    label: '邮箱',
    component: 'Input',
    placeholder: '请输入邮箱',
    defaultValue: '',
    showInMore: true,
  },
  {
    field: 'createTimeRange',
    label: '创建时间',
    component: 'DateRangePicker',
    defaultValue: [],
    showInMore: true,
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  },
]

/**
 * 表格列配置
 */
export const tableConfig = [
  {
    type: 'selection',
    width: 55,
    fixed: 'left',
    align: 'center',
  },
  {
    type: 'index',
    width: 55,
    label: '序号',
    align: 'center',
  },
  {
    prop: 'avatarUrl',
    label: '头像',
    width: 80,
    align: 'center',
    render: (row) => {
      return h(
        'div',
        {
          style: {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            padding: '4px 0',
          },
        },
        [
          row.avatarUrl
            ? h(ElImage, {
                src: row.avatarUrl,
                style: {
                  width: '40px',
                  height: '40px',
                  borderRadius: '50%',
                  cursor: 'pointer',
                },
                fit: 'cover',
                previewSrcList: [row.avatarUrl],
                initialIndex: 0,
                hideOnClickModal: true,
                previewTeleported: true,
                zIndex: 3000,
                previewProps: {
                  closeOnPressEscape: true,
                  teleported: true,
                  style: {
                    '--el-image-viewer-mask-color': 'rgba(0, 0, 0, 0.8)',
                  },
                },
                error: () =>
                  h(
                    'div',
                    {
                      style: {
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: 'var(--el-fill-color-light)',
                        color: 'var(--el-text-color-secondary)',
                        fontSize: '12px',
                        borderRadius: '50%',
                      },
                    },
                    '暂无',
                  ),
              })
            : h(
                'div',
                {
                  style: {
                    width: '40px',
                    height: '40px',
                    borderRadius: '50%',
                    backgroundColor: 'var(--el-fill-color-light)',
                    color: 'var(--el-text-color-secondary)',
                    fontSize: '12px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  },
                },
                '暂无',
              ),
        ],
      )
    },
  },
  {
    prop: 'username',
    label: '用户名',
    minWidth: 120,
  },
  {
    prop: 'nickname',
    label: '昵称',
    minWidth: 120,
  },
  {
    prop: 'phone',
    label: '手机号',
    minWidth: 120,
  },
  {
    prop: 'email',
    label: '邮箱',
    minWidth: 180,
    showOverflowTooltip: true,
  },
  {
    prop: 'status',
    label: '状态',
    minWidth: 100,
    // 自定义渲染
    render: (row) =>
      h(
        ElTag,
        {
          type: row.status === '1' ? 'success' : 'danger',
        },
        () => (row.status === '1' ? '启用' : '禁用'),
      ),
  },
  {
    prop: 'createOn',
    label: '创建时间',
    minWidth: 180,
    render: (row) => {
      if (!row.createOn) return '-'
      const date = new Date(row.createOn)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-')
    },
  },
]

/**
 * 操作按钮配置
 */
export const actionButtons = [
  {
    type: 'primary',
    icon: Edit,
    text: '编辑',
    handler: 'handleEdit',
  },
  {
    type: 'danger',
    icon: Delete,
    text: '删除',
    handler: 'handleDelete',
  },
]

/**
 * 获取搜索表单默认值
 * @returns {Object} 默认值对象
 */
export const getSearchFormDefaultValues = () => {
  return searchConfig.reduce((acc, item) => {
    acc[item.field] = item.defaultValue
    return acc
  }, {})
}
